iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

入門前端技能之旅系列 第 16

Day.16 「重複的事情,交給程式去做!」 —— JavaScript 循環迴圈

  • 分享至 

  • xImage
  •  

「重複的事情,交給程式去做!」 —— JavaScript 循環迴圈

前面學習到了條件判斷式,接著我們來學習有點危險循環迴圈,好啦!也沒那麼誇張~只是寫不好,容易進入無窮迴圈導致當機!不過我們是寫在網頁上~所以如果真的不小心陷入無窮迴圈,就關掉瀏覽器就可以了!

什麼是迴圈?

如同字面上的意思,一直反覆輪迴,重複做一樣的事(怎麼好像人生)。

迴圈流程圖

沒錯!迴圈也有流程圖,但其實也跟判斷流程圖相差不遠,幾乎一模一樣

迴圈流程圖

同樣是要達成所設定的條件來進行循環,是不是跟條件判斷式很像呀!

while 迴圈

while 迴圈是個最基本、結構簡單的迴圈,使用的語法 while ( 條件表達式 ) { 當條件表達式為 true 時,執行程式碼 }

假設我們要印出 12 個月份,除了乖乖的打出 12 個月份,我們也可以發揮工程師精神,使用迴圈來幫我們代勞:

let month = 1; /* 一年由 1 月開始 */
while (month <= 12 /* 一年只有 12 個月,超過就終止 */) {
  console.log( `${month} 月` );  // 利用前面所學的樣板字面值,帶入變數
  month++;  // 重點:需要每執行一次自動 + 1,否則會陷入無限迴圈
}

/*
  "1 月"
  "2 月"
  "3 月"
  "4 月"
  "5 月"
  "6 月"
  "7 月"
  "8 月"
  "9 月" 
  "10 月"
  "11 月"
  "12 月"
*/

非常簡單吧~

do while 迴圈

而 do while 跟 while 非常相似,唯一不同的地方就在於,JavaScript 是由上而下執行程式碼,所以會先執行一次

let month = 1; /* 一年由 1 月開始 */
do {
  // 不管有沒有符合條件,都會先執行"一次"這段程式碼
  console.log( `${month} 月` );
  month++; // 重點記得加
} while (month <= 12) // 一年不超過 12 個月

/*
  "1 月"
  "2 月"
  "3 月"
  "4 月"
  "5 月"
  "6 月"
  "7 月"
  "8 月"
  "9 月" 
  "10 月"
  "11 月"
  "12 月"
*/

for 迴圈

for 迴圈比較嚴謹,它把設定初始值條件判斷更新值 集中在一起設定,讓迴圈的操控次數更容易掌控。

for 迴圈的語法 for (初始化表達式; 條件表達式; 更新表達式) { 條件判斷為 true 執行程式碼 }

同樣用上面 12 個月的例子:

/* 同樣設定初始值 1 月; 不超過 12 個月; 每執行一次 + 1 */
for (let i = 1; i <= 12; i++) {
  console.log( `${i} 月` );
}

/*
  "1 月"
  "2 月"
  "3 月"
  "4 月"
  "5 月"
  "6 月"
  "7 月"
  "8 月"
  "9 月" 
  "10 月"
  "11 月"
  "12 月"
*/

有沒有發現更簡單了!
大多數人會喜歡使用 let i 來初始化元素,是因為 let 是區塊變數,不會汙染到外面的變數,而 iindex 的縮寫,當然你變數名取別的也無所謂就是了!

break & continue

有時候我們並不想讓迴圈直接執行到底,想要跳過幾個選項,或到哪個選項直接停止,就可以利用 break (中斷語法)與 continue (跳過語法),只能使用在循環語法中。
是不是很熟悉~沒錯!就是前面 switch 中的 break 語法,switch 也可以搭配 continue 進行跳過。

break 用法應該都知道了,這裡就介紹 continue 吧~
使用方法也很簡單,假如我想在印出 9 月有幾天紅字:

let holiday = 0;  // 統計假日

/* 同樣設定初始值 1 日; 9 月不超過 30 天; 每執行一次 + 1 */
for (let i = 1; i <= 30; i++) {

  // 1 號是從星期三開始的,判斷如果是星期一到五的話 continue 跳過
  if ( (i + 2) % 7 >= 1 && (i + 2) % 7 <= 5 ) continue;
  
  // 沒被 continue 跳過的,會在這行程式碼進行 + 1
  holiday++;
}

holiday += 1; // 不能忘了中秋節是在星期二

console.log(`紅字有 ${holiday} 天`); // 紅字有 9 天

for 迴圈 與 while 迴圈 的差別

就如同我上一篇所說,既然 for 迴圈 和 while 迴圈 使用的情況與結果都差不多,那為什麼還會存在,一定是有它的意義在!

大多數的情況,都會使用 for 迴圈,是因為 for 迴圈把控制迴圈次數的條件都集中一起寫,閱讀性比較高,適合 條件次數明確 的情況使用。

而當條件次數不明確呢? 沒錯!就要利用 while 迴圈來達成了!while 迴圈在面對隨機性的時候,只要條件的部分符合,不用像 for 迴圈要設定好三個值,while 迴圈就比 for 迴圈會更加靈活好用且更直覺。

這邊舉一下 008 天 重新認識 JavaScript 書中很好的例子,當大樂透要使用「電腦選號」時,迴圈要如何判定呢? 規則:「從 1~49中,隨機選9個不重複的號碼」,這就留給各位思考了。

參考資料


上一篇
Day.15 「條件設定好~讓程式判斷!」 —— JavaScript 條件判斷式
下一篇
Day.17 「如果基本型別是商品,那物件型別就是購物袋」 —— JavaScript 物件型別
系列文
入門前端技能之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言